<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<title>收藏/关注</title>
<link rel="icon" type="image/x-icon">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<body>
<!--样式资源-->
<div th:insert="style :: style"></div>
<!--样式资源-->

<!--nav导航-->
<div th:insert="nav :: nav"></div>
<!--nav导航-->

<!--内容部分-->
<div id="content" style="padding-bottom: 30px">
    <div class="page-header">
        <div class="row">
            <div class="col-md-2">
                <h4 style="color: #363636;font-size: 20px;font-style: italic;margin-left: 20px">&nbsp;&nbsp;&nbsp;个人栏目<small></small></h4>
                <div class="col-md-4">
                    <ul style="margin-top: 10px;margin-left: 30px">
                        <li><a style="text-decoration: none;color: #464646" href="/home/publish/index" class="btn"><i class="icon-edit" style="color: grey"></i>&nbsp;我要发帖</a></li>
                        <li><a style="text-decoration: none;color: #464646" href="/home/collection/index" class="btn"><i class="icon-star" style="color: grey"></i>&nbsp;收藏/关注</a></li>
                        <li><a style="text-decoration: none;color: #464646" href="/home/repo/index" class="btn"><i class="icon-cloud" style="color: grey"></i>&nbsp;个人帖库</a></li>
                    </ul>
                </div>
            </div>

            <div class="col-md-8" >
                <h4 style="font-size: 20px;font-style: italic"><i class="icon-star"></i>&nbsp;收藏/关注列表<small></small></h4>
                <div class="col-md-12" style="margin-left: 10px" id="collection_list">
                    <div class="row" style="margin-top: 5px">
                        <table class="table">
                            <thead><tr><td><i class="icon-user">坛友</i></td></tr></thead>
                            <tr v-for="item in users"><td><a :href="'/home/user/index/'+item.id" style="text-decoration: none"><b>{{item.nickname}}</b></a><span style="font-size: 6px">&nbsp;Lv:</span><span style="font-size: 6px"><a :href="'/home/grade/index/'" style="text-decoration: none"><b>{{item.grade}}</b></a></span><span>&nbsp;<button :id="item.cid" style="font-size: 10px" class="btn btn-default btn-xs"  onclick="cancalCollection(this.id)">取消关注</button></span></td>
                            </tr>
                        </table>
                    </div>
                    <div class="row" style="margin-top: 5px">
                        <table class="table">
                            <thead><tr><td><i class="icon-file"></i>帖子</td></tr></thead>
                            <tr v-for="item in posts"><td><a :href="'/home/post/index/'+item.id" style="text-decoration: none"><b>{{item.title}}</b></a><span style="font-size: 6px">&nbsp;原文来自:</span><span style="font-size: 6px"><a :href="'/home/user/index/'+item.uid" style="text-decoration: none"><b>{{item.nickname}}</b></a></span><span><button :id="item.cid" style="font-size: 10px" class="btn btn-default btn-xs" onclick="cancalCollection(this.id)">取消关注</button></span></td>
                        </table>
                    </div>
                    <div class="row" style="margin-top: 5px">
                        <table class="table">
                            <thead><tr><td><i class="icon-reorder"></i>版块</td></tr></thead>
                            <tr v-for="item in forums"><td>{{item.name}}</td>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--页脚-->
<div th:insert="~{footer :: footer}"></div>
<!--页脚-->
<script th:src="@{/user.js}"></script>
<script>
    let collection = new Vue({
        el:"#collection_list",
        data:{
            users:"",
            forums:"",
            posts:""
        },
        methods:{
            getUser:function () {
                layui.use('layer', function() {
                    let index = layer.load(2);
                    let obj = getData(USER_COLLECTION_USERS,'?uid='+UID);
                    collection.users = obj.data;
                    layer.close(index);
                });
            },
            getForum:function () {
                layui.use('layer', function() {
                    let index = layer.load(2);
                    let obj = getData(USER_COLLECTION_FORUMS,'?uid='+UID);
                    collection.forums = obj.data;
                    layer.close(index);
                })
            },
            getPost:function () {
                layui.use('layer', function() {
                    let index = layer.load(2);
                    let obj = getData(USER_COLLECTION_POSTS,'?uid='+UID);
                    collection.posts = obj.data;
                    layer.close(index);
                })
            }
        }
    });
    function getCollection() {
        layui.use('layer', function() {
            collection.getUser();
            collection.getForum();
            collection.getPost();
        });
    }
    //取消关注
    function cancalCollection(id){
        layui.use('layer', function() {
            // layer.msg("数据获取完毕");
            layer.confirm('是否继续？', {
                btn: ['确定', '关闭']
            }, function(index, layero){
                //按钮【按钮一】的回调
                let obj = deleteData(COLLECTION_DEL,'?id='+id);
                if(obj.data !== 0){
                    layer.msg("取消成功!");
                    getCollection();
                }else {
                    layer.msg("取消失败!");
                }
                layer.close(index);
            }, function(index){
                //按钮【按钮二】的回调
                layer.close(index);
            });

        });
    }
    getCollection();
</script>
</body>
</html>